<template>
  <div>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <!--<FormItem>-->
      <Row>
        <FormItem prop="title" label="图片描述:">
          <Input v-model="formValidate.describtion" placeholder="请输入日志标题"></Input>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="是否展示在首页:">
          <RadioGroup v-model="formValidate.isshow">
            <Radio label="0">不展示</Radio>
            <Radio label="1">展示</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
    <Row>
      <Col span="10">
      <FormItem label="图片:" prop="picurl">
        <upload :uploadList1="uploadList1" ref="picref" v-on:gacomplistenTochildEvent="getuploadListcomp"></upload>
      </FormItem>
      </Col>

      <Col span="10">

      </Col>
    </Row>

    <FormItem>

      <Button type="primary" @click="handleSubmit()">提交</Button>
      <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
      <Button type="primary" @click="fanhui()" style="margin-left: 8px">返回</Button>
    </FormItem>

  </Form>
  </div>
</template>

<script>
  import upload from  '../utils/share_upload_pics';
  // import upload from  '../person/person_list.vue';
  export default {
    data () {
      return {
        uploadList1:[],
        eachupload:{
          name:'',
          url:'',
          uid:'',
          status:'finished',
          showProgress:false,
          size:'',
        },
        showLogger:'showLogger',
        formValidate: {
          id:'',
          describtion: '',
          picurl: '',
          isshow:'0'
        },
        ruleValidate: {
          describtion: [
            { required: true, message: '标题不能为空！', trigger: 'blur' }
          ],
          picurl: [
            { required: true, message: '内容不能为空！', trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      this.loadinginfo();
    },
    components: {
      upload
    },
    methods: {
      getuploadListcomp(val){
        this.uploadList1=val;
      },

      loadinginfo(){
        let self=this;
        let id= '';
        if(self.$route.query.id){
          id=self.$route.query.id;
          this.$http.get("/api/picture/selectById?id="+id)
            .then(response => {
              self.formValidate=response.data;
              self.formValidate.isshow=response.data.isshow+'';
              if(response.data.picurl!=''){
                let uploadlisturl =response.data.picurl.split(',');
                for(let i=0;i<uploadlisturl.length;i++){
                  self.eachupload.url=uploadlisturl[i];
                  this.eachupload.uid=1522050919454+i;
                  self.uploadList1.push(self.eachupload);
                  //不这样初始化，会出现相同的图片
                  self.eachupload={name:'',
                    url:'',
                    uid:'',
                    status:'finished',
                    showProgress:false,
                    size:'',};
                }
                this.$refs.picref.uploadList=this.uploadList1;
                console.log("this.$refs.picref.uploadList===", this.$refs.picref.uploadList);
              }
            }, response => {
              console.log("获取信息失败");
            })
        }

      },
      fanhui(){
        this.$router.replace({ path: '/showPics'});
      },
      handleSubmit () {
        let self=this;
        console.log("self.formValidate====",self.formValidate);
        console.log("file......................",this.$refs.picref.uploadList);
        let uploadlistarr=this.$refs.picref.uploadList;
        let uploadlisturl=[];
        for(let i=0;i<uploadlistarr.length;i++){
          uploadlisturl.push(uploadlistarr[i].url);
        }
        self.formValidate.picurl= uploadlisturl.join(',');
        console.log("uploadlisturl.....",uploadlisturl);
//        self.formValidate.picurl=this.$refs.picref.uploadList.url.join(',');
        console.log('self.formValidate.picurl====',self.formValidate.picurl);
        this.$http.post("/api/picture/save/",self.formValidate)
          .then(response => {
            if(response.data.code==500){
              alert("保存成功！");
              this.$router.replace({ path: '/showPics'})
            }
            else{
              alert("保存失败！");

            }
          }, response => {
            console.log("获取信息失败");
            alert("保存失败！");
          })
      },
      handleReset (name) {
        this.formValidate.describtion='';
        this.formValidate.picurl='';
        this.$refs.picref.uploadList=[];
        // this.$refs[name].resetFields();
      }
    }
  }
</script>
